<template>
  <div class="api-view" @click.stop="asideEvent">
    <div class="aside" id="aside" ref="sidebar" @contextmenu="contextmenu">
      <el-tree class="not-select" :data="data" default-expand-all :props="defaultProps" @node-click="nodeClick" @node-contextmenu="handleNodeClick"
               :highlight-current="true"></el-tree>
      <div :class="`arrow ${isShowSidebar ? 'left-radius' : 'right-radius'}`" @click="clickArrow">
        <i v-show="isShowSidebar" class="el-icon-caret-left"></i>
        <i v-show="!isShowSidebar" class="el-icon-caret-right"></i>
      </div>
    </div>
    <div class="main">
      <iframe id="show-iframe" class="show-iframe" frameborder=0 name="showHere" scrolling=auto :src="iframeSrc"></iframe>
    </div>
    <Panel :show.sync="showPanel" :position="position" :currentData="currentData" @callback="panelCallback"></Panel>
    <Edit :show.sync="showEdit" :form="editForm" :type="editType" @callback="panelCallback"></Edit>
    <MoveTo :show.sync="showMoveTo" :currentData="currentData"></MoveTo>
    <el-dialog
      title="删除"
      :visible.sync="dialogVisible"
      width="30%">
      <span style="font-size: 20px;"><i class="el-icon-question" style="color: lightcoral;"></i>&nbsp;确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteClosure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Panel from './Panel.vue';
import MoveTo from './MoveTo.vue';
import Edit from './Edit.vue';
import Axios from '../../utils/axios';
import config from '../../utils/config';
import WebsocketUtil from '../../utils/websocket/websocket'
@Component({
  components:{ Panel, Edit, MoveTo }
})
export default class HomePage extends Vue {
  editType:number = 1
  currentData:any = {
    label:'',
    children:[]
  }
  showPanel:Boolean = false
  showEdit:Boolean = false
  showMoveTo:Boolean = false
  dialogVisible:Boolean = false
  position:any = {
    x:0,
    y:0
  }
  editForm:any = {
    label:'',
    children:[]
  }
  iframeSrc:string = ''
  isShowSidebar:boolean = true
  websocketUtil:any = {}
  data:any =  []
  defaultProps:any = {
    children: 'children',
    label: 'label'
  }

  created(){
    this.getMenus();
  }

  mounted(){
    this.iframeClick()
    // 初始化websocket
    this.initSocket()
    // 注册原生事件
    this.addEventListener()
  }

  clickArrow () {
    this.isShowSidebar = !this.isShowSidebar
    const aside = document.getElementById('aside')
    const style = aside.getBoundingClientRect()
    if (this.isShowSidebar) {
      aside.style.marginLeft = '0px'
    } else {
      aside.style.marginLeft = `-${style.width}px`
    }
  }

  addEventListener () {
    window.addEventListener('beforeunload', () => {
      this.websocketUtil.close();
    })
  }

  initSocket() {
    this.websocketUtil = new WebsocketUtil({
      socketUrl: `ws://${location.hostname}:5000`,
      onmessage: this.onmessage
    })
  }

  onmessage (data) {
    if (data && data.isRefresh) {
      this.getMenus()
    }
  }

  iframeClick() {
    const dom:any = document.getElementById("show-iframe");
    if(document.all) {
      dom.attachEvent("click", this.asideEvent);
    } else {
      dom.contentWindow.addEventListener("click", this.asideEvent, false);
    }
  }

  //获取目录
  getMenus(){
    Axios({
      url:`${config.apiHost}/catalogues`,
      method:'post'
    }).then(res => {
      this.data = res.data;
    }).catch(err => {
      this.$message.error(err.message);

    })
  }

  //删除文件
  delFile(data){
    Axios({
      url:`${config.apiHost}/node/delete`,
      method:'post',
      data
    }).then(res =>{
      this.$message.success('删除成功');
      this.getMenus();
      this.iframeSrc = '';
      this.dialogVisible = false;
    }).catch(err => {
      this.$message.error(err.message);
    })
  }

  contextmenu(e:MouseEvent){
    e.preventDefault();
  }

  asideEvent(){
    this.showPanel = false;
  }

  handleNodeClick(e:MouseEvent,data:any) {
    this.currentData = { ...data };
    this.position = {
      x:e.x,
      y:e.y
    }
    this.showPanel = e.button === 2 ? true : false;
  }

  deleteClosure () {}

  panelCallback(data:any,type){
    if(type === -1){
      this.getMenus();
      return;
    }
    this.editType = type || 1;
    if(type === 3){
      this.deleteClosure = () => {
        this.delFile({mainId:data.mainId});
      }
      this.dialogVisible = true
    }else if(type === 5){
      this.showMoveTo = true
    }else if(type === 1){
      this.editForm = {
        label:'',
        children:[],
        mainId:this.currentData.mainId,
        type:this.currentData.type
      }
      this.showEdit = true;
    }else{
      const currentData = JSON.parse(JSON.stringify(this.currentData))
      if (currentData.type === 2) {
        currentData.label = currentData.label.split('.')[0]
      }
      this.editForm = currentData;
      this.showEdit = true;

    }
  }

  nodeClick(data:any){
    this.showPanel = false;
    if(data.type === 2){
      this.iframeSrc = `${config.apiHost}/${data.src}`;
    }
  }

}
</script>
<style>
   html,body{
    height:100%;
    margin:0;
    padding:0;
  }
   .not-select {
     user-select:none;
   }
</style>
<style lang="less" scoped>
  .api-view{
    height:100%;
    display: flex;
    .aside{
      position: relative;
      margin-left: 0;
      transition: margin-left 500ms;
      background: #eee;
      .arrow{
        position: absolute;
        right: 0;
        width: 20px;
        height: 50px;
        top: 45%;
        margin-top: -25px;
        background: deepskyblue;
        text-align: center;
        cursor: pointer;
        transition: right 500ms;
        &.left-radius {
          border-radius: 7px 0 0 7px;
        }
        &.right-radius {
          border-radius: 0 7px 7px 0;
          right: -20px;
        }
        &:before {
          content: '';
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle;
        }
        i {
          color: #fff;
          font-size: 20px;
          vertical-align: middle;
        }
      }
    }
    .main{
      display:flex;
      flex:1;
      height:100%;
      .show-iframe{
        width:100%;
        height:100%;
      }
    }
  }
  /deep/.el-tree {
    background: #eee;
    .el-tree-node__label {
      padding-right: 25px;
    }
  }
  /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: deepskyblue;
    color: #fff;
    .el-tree-node__expand-icon {
      color: #fff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }
  }
</style>
